<template>
  <a-form ref="formRef" layout="horizontal" :model="dataForm">
    <a-row :gutter="20" justify="space-between">
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="回修单号"
          :label-col-flex="pageData.labelColFlex"
          field="returnRepairsCode"
          :rules="[{ required: true, message: '回修单号必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-input class="bacClass" v-model="dataForm.returnRepairsCode" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="流转卡号"
          :label-col-flex="pageData.labelColFlex"
          field="roamCard"
          :rules="[{ required: true, message: '流转卡号必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-select popup-container="html" 
            class="bacClass"
            v-model="dataForm.roamCard"
            allow-clear
            allow-search
            @search="seatchHandler($event, 4)"
            @focus="selectAwait(4)"
          >
            <a-option
              v-for="item in pageData.circulDropList"
              :key="item.id"
              :value="item.flowCardCode"
              >{{ item.flowCardCode }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="计划单号"
          :label-col-flex="pageData.labelColFlex"
          field="planAdd"
          :rules="[{ required: true, message: '计划单号必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-select popup-container="html" 
            class="bacClass"
            v-model="dataForm.planAdd"
            allow-clear
            allow-search
            @search="seatchHandler($event, 8)"
            @focus="selectAwait(8)"
          >
            <a-option
              v-for="item in pageData.planCodeList"
              :key="item.id"
              :value="item.planOrderCode"
              >{{ item.planOrderCode }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="客户名称"
          :label-col-flex="pageData.labelColFlex"
          field="customerName"
          :rules="[{ required: true, message: '客户名称必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-select popup-container="html" 
            class="bacClass"
            v-model="dataForm.customerName"
            allow-clear
            allow-search
            @search="seatchHandler($event, 1)"
            @focus="selectAwait(1)"
          >
            <a-option
              v-for="item in pageData.customerList"
              :key="item.id"
              :value="item.customName"
              >{{ item.customName }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="开单日期"
          :label-col-flex="pageData.labelColFlex"
          field="billingDete"
          :rules="[{ required: true, message: '开单日期必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-date-picker  popup-container="html"  class="bacClass" show-time v-model="dataForm.billingDete" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="20" justify="space-between">
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="回修原因"
          :label-col-flex="pageData.labelColFlex"
          field="repairsRemark"
          :rules="[{ required: true, message: '回修原因必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-input class="bacClass" v-model="dataForm.repairsRemark" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="缸型"
          :label-col-flex="pageData.labelColFlex"
          field="cylinderType"
          :rules="[{ required: true, message: '缸型必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-input class="bacClass" v-model="dataForm.cylinderType" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="品名"
          :label-col-flex="pageData.labelColFlex"
          field="productName"
          :rules="[{ required: true, message: '品名必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-input class="bacClass" v-model="dataForm.productName" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="色号"
          :label-col-flex="pageData.labelColFlex"
          field="colorCode"
          :rules="[{ required: true, message: '色号必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-input class="bacClass" v-model="dataForm.colorCode" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="色称"
          :label-col-flex="pageData.labelColFlex"
          field="colorName"
          :rules="[{ required: true, message: '色称必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-input class="bacClass" v-model="dataForm.colorName" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="20">
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="备注" :label-col-flex="pageData.labelColFlex" field="remark">
          <a-input class="bacClass" style="width: 270px" v-model="dataForm.remark" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script lang="ts">
  import { ref, reactive, toRef } from 'vue'
  import { DupReworkInterface } from '@/interface/dupSampleReg'
  import { FormInstance } from '@arco-design/web-vue'
  export default {
    name: 'DupRework',
    props: {
      pageData: {
        type: Object,
        default: () => ({}),
        require: true,
      },
      dataForm: {
        type: Object,
        default: () => ({}),
        require: true,
      },
    },
    setup(props, { emit, expose }) {
      const dataForm = reactive<DupReworkInterface>({
        id: null,
        duplicateSampleRegisterID: null,
        returnRepairsCode: '',
        roamCard: '',
        planAdd: '',
        customerName: '',
        billingDete: '',
        repairsRemark: '',
        cylinderType: '',
        productName: '',
        colorCode: '',
        colorName: '',
        remark: '',
      })
      if (props.dataForm) {
        for (var key in props.dataForm) {
          dataForm[key] = props.dataForm[key]
        }
        // console.log(dataForm);
      }
      const seatchHandler = (event: any, index: number) => {
        emit('search-handler', event, index)
      }
      const selectAwait = (index: number) => {
        emit('select-await', index)
      }
      const formRef = ref<FormInstance>()
      formRef.value?.validate().then(async (err) => {
        if (!err) {
          expose({ dataForm })
        }
      })
      return {
        dataForm,
        seatchHandler,
        selectAwait,
      }
    },
  }
</script>

<style scoped>
  .aInput {
    width: 270px;
    background: #fff;
    border: 1px solid #c9cdd3;
  }
</style>
